<!-- components/CustomTabBar.vue -->
<template>
  <view class="custom-tabbar" :style="{ paddingBottom: safeAreaInsets + 'px' }">
    <view 
      v-for="(item, index) in tabList" 
      :key="index"
      class="tab-item"
      :class="{ active: curRoute === item.pagePath }"
      @click="switchTab(item, index)"
    >
      <image 
        class="icon"
        :src="curRoute === item.pagePath ? item.selectedIconPath : item.iconPath" 
      />
      <text class="label">{{ item.text }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
// Tab 数据配置
const tabList = ref([
	{
  		"pagePath": "/pages/home",
  		"text": "首页",
  		"iconPath": "/static/images/tabbar/home.png",  // 默认图标
  		"selectedIconPath": "/static/images/tabbar/home_cur.png" // 选中图标
  	},
  	{
  		"pagePath": "/pages/worker/index",
  		"text": "工单",
  		"iconPath": "/static/images/tabbar/worker.png",  // 默认图标
  		"selectedIconPath": "/static/images/tabbar/worker_cur.png" // 选中图标
  	},
  	{
  		"pagePath": "/pages/message/index",
  		"text": "消息",
  		"iconPath": "/static/images/tabbar/message.png",  // 默认图标
  		"selectedIconPath": "/static/images/tabbar/message_cur.png" // 选中图标
  	},
  	{
  		"pagePath": "/pages/my/index",
  		"text": "我的",
  		"iconPath": "/static/images/tabbar/my.png",  // 默认图标
  		"selectedIconPath": "/static/images/tabbar/my_cur.png" // 选中图标
  	}
])

// 安全区域适配（解决 iPhoneX 等机型底部遮挡）
const safeAreaInsets = ref(0)
const curRoute = ref('')

const pages = getCurrentPages()
curRoute.value = '/' + pages[0].route
onMounted(() => {
  uni.getSystemInfo({
    success(res) {
      safeAreaInsets.value = res.screenHeight - res.safeArea.bottom
    }
  })
})

// 切换逻辑
const switchTab = (item, index) => {
  uni.switchTab({ url: item.pagePath }) // 必须用 switchTab 跳转[7](@ref)
}
</script>

<style scoped>
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  height: 50px;
  background: #fff;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  z-index: 999;
}
.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.tab-item.active .label {
  color: #00706A;
  font-weight: bold;
}
/* 点击动画 */
.tab-item:active {
  transform: scale(0.92);
  opacity: 0.8;
}
.icon {
  width: 24px;
  height: 24px;
  margin-bottom: 4px;
}

/* 在 CustomTabBar.vue 中添加 */
.tab-item {
  transform-origin: center;
}
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(0.88); }
  100% { transform: scale(1); }
}
.tab-item:active {
  animation: pulse 0.4s;
}
</style>